<template>
  <div id="app" class="room-content">
    <img :src="arr.url" @click="toGo" />
    <div class="info" @click="toGo">
      <p class="name">{{ arr.name }}</p>
      <p class="address">{{ arr.address }}</p>
      <p class="distance">距离我1.3km</p>
      <p class="price">1000元~2000元</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "roomInfo",
  props: {
    arr: {
      type: Object,
      default: () => [],
    },
  },
  data() {
    return {
      val: "",
    };
  },
  created() {},
  methods: {
    toGo(){
      this.$emit("toGo")
    }
  },
};
</script>

<style lang="less">
.room-content {
  background: #fff;
  padding: 3vw 3vw;
  display: flex;
  border-radius: 2vw;
  img {
    width: 36vw;
    height: 28vw;
    margin: 0 auto 0 0;
  }

  .info {
    padding-left: 1vw;
    position: relative;
    float: 1;
    width: 45vw;
    height: 28vw;
    p {
      margin: 0;
      text-align: left;
    }

    .name {
      font-size: 4vw;
      font-weight: bold;
    }

    .address {
      padding-top: 2.5vw;
      padding-bottom: 2.5vw;
      color: #c5c5c5;
      font-size: 3.5vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .distance {
      width: 19vw;
      text-align: center;
      padding: 1vw;
      font-size: 3vw;
      color: #b8c1ea;
      border: 1px solid #b8c1ea;
      border-radius: 1vw;
    }

    .price {
      bottom: 0;
      position: absolute;
      font-size: 4vw;
      color: #f6536c;
      font-weight: bold;
    }
  }
}
</style>
